<template>
    <div class="classify">
        <van-search placeholder="请输入搜索关键词" />
        <van-tree-select height="90vh" :items="items" @click-nav="nav" :main-active-index.sync="activeIndex">
            <template #content>

                <van-image :src="currentCategory.banner_url" />
                <h5>{{currentCategory.front_name}}</h5>
                </van-image>
                <div class="title">
                    <span></span>
                    <h3>{{currentCategory.name}}</h3>
                </div>

                <van-grid :column-num="3">
                    <van-grid-item v-for="item of currentCategory.subCategoryList" :key="item.id">
                        <img :src="item.wap_banner_url" alt="">
                        <span>{{item.name}}</span>
                    </van-grid-item>
                
                </van-grid>
            </template>
        </van-tree-select>
    </div>
</template>

<script>

    import { getCatalog,getcurCatalog} from "../api/api"
    export default {
        name: 'YxCassifypage',
        data() {
            return {

                // active:"0",
                activeIndex: 0,
                items: [],
                categoryList: [],

                // 第一个展示的数据
                currentCategory: [],
                activeId: 1,
                activeIndex: 0,
            };
        },
        created() {
            getCatalog().then((res) => {
                this.categoryList = res.data.categoryList;
                this.currentCategory = res.data.currentCategory
                console.log(this.categoryList)
                console.log(this.currentCategory)
                this.categoryList.forEach((item) => {
                    this.items.push({ text: item.name });

                })
            })
        },

        methods: {
            nav(val) {
                getcurCatalog({id:this.categoryList[val].id}).then((res)=>{
                    this.currentCategory = res.data.currentCategory
                })
              
            }
        },
    };
</script>

<style lang="scss" scoped>
    .van-sidebar-item--select {
        background-color: #fff;
    }

    .van-sidebar-item {
        width: 2rem;
        height: 1.2rem;
    }

    .van-tree-select__nav-item {
        padding: .38rem .20rem;
    }

    .van-tree-select__content {
        flex: 4;
    }

    .title {
        position: relative;
        text-align: center;
        width: 100%;
        height: 50px;
        position: relative;
        background: #fff;
        font-size: 16px;
        margin-top: .2rem;

        h3 {
            position: absolute;
            width: 30%;
            height: 40px;
            background-color: #fff;
            margin: auto;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            line-height: 40px;
            text-align: center;
            color: #000;
        }

        span {
            width: 50%;
            height: 2px;
            background-color: #ccc;
            position: absolute;
            margin: auto;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
        }
    }

    .van-image {
        width: 5.7rem;
        height: 2.8rem;
        margin: 0 7px;
        border-radius: 5px;
        box-shadow: 0 0 6px #000;
        position: relative;
        filter: brightness(0.5);
    }

    .van-grid {
       margin-top: .3rem;
    }

   
    .van-grid-item{
       
        img{
           width: .56rem;
           height:.56rem;
        }
        span{
            font-size: .28rem;
        }
    }
    h5 {
        color: #fff;
        display: inline-block;
        position: absolute;
        top: 10%;
        left: 48%;
    }

</style>
